<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 简易tab栏切换 -->
        <section>
            <button @click="togoal('demo1')">demo1</button>
            <button @click="togoal('demo2')">demo2</button>
            <button @click="togoal('demo3')">demo3</button>
        </section>
        <!-- 1. 通过 component 绑定了 组件名称  componentId  -->
        <keep-alive :max="3">
            <component :is="componentId"></component>
        </keep-alive>

        <!-- 
            缺点：
            从下面的组件生命周期可知
           每次切换都重新创建或销毁组件 影响性能
           解绝方法
            :max="n" 指缓存组件的数量
            <keep-alive :max="3">
                <component :is="componentId"></component>
            </keep-alive>
         -->
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("demo1", {
            template: `
                <section>这是组件模板一</section>
            `,
            created() {
                console.log("创建了组件demo1");
            },
            destroyed() {
                console.log("销毁了组件demo1");
            },
        })
        Vue.component("demo2", {
            template: `
                <section>这是组件模板二</section>
            `,
            created() {
                console.log("创建了组件demo2");
            },
            destroyed() {
                console.log("销毁了组件demo2");
            },
        })
        Vue.component("demo3", {
            template: `
                <section>这是组件模板三</section>
            `,
            created() {
                console.log("创建了组件demo3");
            },
            destroyed() {
                console.log("销毁了组件demo3");
            },
        })
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "消息",
                componentId: "demo1"
            },
            methods: {
                togoal: function (id) {
                    this.componentId = id
                },
            },


        })
    </script>
</body>

</html>